<template>
  <div>
    <!-- v-show 只在控制元素的css样式 -->
     <!-- <div v-show="flag">我是盒子</div> -->
     
    <!-- v-if 实质是在动态的创建和删除元素节点 -->
     <!-- <div v-if="flag">我是盒子</div> -->

  <!-- <img v-show="flag" src="../assets/微信图片_20221130145518.png" alt="">
  <button @click="fn" >点击以后显示和隐藏</button> -->

  <!-- 注意：v-if v-else-if  v-else 只能在同一级 -->
  <div v-if="age>=60">60岁以上，唱跳rap</div>
    <div v-else-if="age>=30">30岁以上，抽烟喝酒烫头</div>
    <div v-else-if="age>=20">20岁以上，煮茶焚香下棋</div>
    <div v-else>20岁以下，练习广场舞</div>
   </div>
</template>
 
<script>
export default {

  data() {
    return {
      flag: true,
      age:30
    };
  },
  methods:{
    fn(){
      this.flag = !this.flag
    }
  }
};
</script>

<style scoped>
     
</style>